<template>
	<div class="goods-card" @click="details">
		<div class="imgBox">
			<sa-image size="80" :url="data.image" radius="8" />
		</div>
		<div class="goodsInfo sa-flex-col sa-row-between">
			<div>
				<div class="goodsInfo-title sa-line-2">
					{{ data.title }}
				</div>
				<div class="goodsInfo-price" v-if="data.price">
					<span class="label">采购价</span>
					<span class="value">￥{{ data.price.length > 1 ? data.price.join('~') : data.price[0] }}</span>
				</div>
				<div class="goodsInfo-sales">
					<span class="label">月销量</span>
					<span class="value">{{ formatSales(data.sales) }}</span>
				</div>
				<div class="goodsInfo-tag sa-line-1">
					<div class="tag-item" v-for="ser in  serviceList">
						{{ser.name}}</div>
				</div>
			</div>
			<el-button class="goodsInfo-btn" color="#3768FA" plain :disabled="false" @click.stop="add">一键铺货</el-button>
		</div>
	</div>
</template>

<script setup>
import { onMounted,computed, reactive, ref } from 'vue';
import { api } from '../recommend.service';
import { useModal, usePagination } from '@/sheep/hooks';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { composeFilter } from '@/sheep/utils';
import { cloneDeep } from 'lodash';
import { ElMessageBox } from 'element-plus';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';
import { useRouter } from 'vue-router';
const emit = defineEmits(['add','details']);
const props = defineProps({
	data: {
		type: Object,
		default: () => {
			return {};
		}
	}
});
const router = useRouter();
const serviceList = computed(()=>{
	if(!props.data.serviceList)return []
	return JSON.parse(props.data.serviceList)
})
onMounted(() => {
})
function formatSales(num) {
	if (num == null || isNaN(num)) return '0';
	num = Number(num);

	if (num >= 10000) {
		return `${Math.floor(num / 10000)}万+`;
	} else if (num >= 1000) {
		return `${Math.floor(num / 1000)}千+`;
	} else {
		return `${num}`;
	}
}
function details(){
	emit('details',cloneDeep(props.data))
}
function add(){
	emit('add',cloneDeep(props.data))
}

</script>

<style scoped lang="scss">
.goods-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding-bottom: 10px;

	.imgBox {
		width: 100%;
		padding: 100% 0 0;
		border-radius: 8px;
		position: relative;
		overflow: hidden;

		&>div {
			width: inherit !important;
			height: inherit !important;
		}

		.sa-image {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}

		.sa-image,
		.el-image {
			width: inherit !important;
			height: inherit !important;
		}
	}

	.goodsInfo {
		flex: 1;

		.goodsInfo-title {
			font-family: Source Han Sans;
			font-size: 15px;
			font-weight: normal;
			line-height: normal;
			letter-spacing: normal;
			color: #2E2E2E;
		}

		.goodsInfo-price {
			font-size: 12px;
			color: #999999;
			margin-bottom: 2px;

			.label {
				margin-right: 4px;

				font-family: Source Han Sans;
				font-size: 14px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}

			.value {
				font-family: Source Han Sans;
				font-size: 18px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #ED2828;
			}
		}

		.goodsInfo-sales {
			font-size: 12px;
			color: #999999;
			margin-bottom: 2px;

			.label {
				margin-right: 4px;
				font-family: Source Han Sans;
				font-size: 14px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}

			.value {
				font-family: Source Han Sans;
				font-size: 14px;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				color: #9E9E9E;
			}
		}

		.goodsInfo-tag {
			display: flex;
			flex-wrap: wrap;
			// height: 24px;
			.tag-item {
				margin-bottom: 4px;
				margin-right: 4px;
				padding: 0 6px;
				height: 20px;
				border-radius: 4px;
				background: #F2F6FE;
				font-size: 12px;
				color: #3768FA;
			}
		}

		.goodsInfo-btn {
			width: 100%;
			height: 32px;
		}
	}
}
</style>